<template>
  <a-row :gutter="0" v-if="statInfo">
    <a-col :span="6">
      <a-card :bordered="false" :bodyStyle="bodyStyle">
        <div class="wallet-item">
          <div class="top">
            <img class="img" src="../../assets/gmv.png" alt="" />
            <div class="info-container">
              <h3 class="title">总交易额</h3>
              <p class="content">¥ {{ statInfo.gmv | NumberFormat }}</p>
            </div>
          </div>
        </div>
      </a-card>
    </a-col>
    <a-col :span="6">
      <a-card :bordered="false" :bodyStyle="bodyStyle">
        <div class="wallet-item">
          <div class="top">
            <img class="img" src="../../assets/online_platform.png" alt="" />
            <div class="info-container">
              <h3 class="title">线上交易额</h3>
              <p class="content">¥ {{ statInfo.online_platform | NumberFormat }}</p>
            </div>
          </div>
        </div>
      </a-card>
    </a-col>
    <a-col :span="6">
      <a-card :bordered="false" :bodyStyle="bodyStyle">
        <div class="wallet-item">
          <div class="top">
            <img class="img" src="../../assets/offline_platform.png" alt="" />
            <div class="info-container">
              <h3 class="title">线下交易额</h3>
              <p class="content" v-if="statInfo.offline_platform">¥ {{ statInfo.offline_platform.toFixed(2) | NumberFormat }}</p>
            </div>
          </div>
          <div class="bottom">
            <div class="left">
              平台支付：<span
              >¥
                {{ ( (statInfo.offline_wallet + statInfo.offline_wxpay + statInfo.offline_alipay) ).toFixed(2)| NumberFormat }}</span
              >
            </div>
            <div class="right" v-if="statInfo.offline_wash">
              现金支付：<span>¥ {{ (statInfo.offline_wash ).toFixed(2) | NumberFormat }}</span>
            </div>
          </div>
        </div>
      </a-card>
    </a-col>
    <a-col :span="6">
      <a-card :bordered="false" :bodyStyle="bodyStyle">
        <div class="wallet-item">
          <div class="top">
            <img class="img" src="../../assets/online_wallet.png" alt="" />
            <div class="info-container">
              <h3 class="title">充值交易额</h3>
              <p class="content">¥ {{ ((statInfo.online_wallet + statInfo.offline_wallet) ).toFixed(2) | NumberFormat }}</p>
            </div>
          </div>
        </div>
      </a-card>
    </a-col>
  </a-row>
  <a-row :gutter="24" v-else>
    <a-col :span="6">
      <a-card :bordered="false" :bodyStyle="{ paddingTop: '42px' }">
        <div class="wallet-item">
          <div class="top">
            <img class="img" src="../../assets/gmv.png" alt="" />
            <div class="info-container">
              <h3 class="title">总金额</h3>
              <p class="content" >¥ {{ wallet.all_money | NumberFormat }}</p>
            </div>
          </div>
        </div>
      </a-card>
    </a-col>
    <a-col :span="6">
      <a-card :bordered="false" :bodyStyle="{ paddingTop: '42px' }">
        <div class="wallet-item">
          <div class="top">
            <img class="img" src="../../assets/online_platform.png" alt="" />
            <div class="info-container">
              <h3 class="title">已取款金额</h3>
              <p class="content">¥ {{ wallet.take_money | NumberFormat }}</p>
            </div>
          </div>
        </div>
      </a-card>
    </a-col>
    <a-col :span="6">
      <a-card :bordered="false" :bodyStyle="{ paddingTop: '42px' }">
        <div class="wallet-item">
          <div class="top">
            <img class="img" src="../../assets/offline_platform.png" alt="" />
            <div class="info-container">
              <h3 class="title">可取款金额</h3>
              <p class="content">¥ {{ wallet.usable_money | NumberFormat }}</p>
            </div>
          </div>
        </div>
      </a-card>
    </a-col>
    <a-col :span="6" >
      <a-card :bordered="false" :bodyStyle="{ paddingTop: '42px' }">
        <div class="wallet-item">
          <div class="top">
            <img class="img" src="../../assets/online_wallet.png" alt="" />
            <div class="info-container">
              <h3 class="title">充值金额</h3>
              <p class="content">¥ {{ wallet.topup_money || 0 }}</p>
            </div>
          </div>
        </div>
      </a-card>
    </a-col>
  </a-row>
</template>

<script>
export default {
  props: {
    statInfo: {
      type: Object,
      default: () => {}
    },
    wallet: {
      type: Object,
      default: () => {}
    }
  },
  data(){
    return {
      bodyStyle:{
        'padding':'42px 8px'
      }
    }
  }
}
</script>

<style lang="less" scoped>
.wallet-item {
  height: 118px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .top {
    display: flex;
    align-items: center;

    .img {
      height: 73px;
    }
    .info-container {
      margin-left: 22px;
    }
    .title {
      font-size: 20px;
      color: rgba(0, 0, 0, 0.65);
      font-weight: bold;
      margin-bottom: 0;
    }
    .content {
      font-size: 32px;
      font-weight: bold;
      margin-bottom: 0;
      color: #000;
      margin-top: 6px;
    }
  }
  .bottom {
    display: flex;
    justify-content: space-between;
    > div {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.65);
      > span {
        color: #000;
        font-weight: bold;
        font-family: HelveticaNeue;
      }
    }
  }
}
</style>
